import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
} from 'antd';

const InputGroup = Input.Group;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;

const customerFormItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 15 },
  },
};

@connect(({ customer }) => ({
  customer,
}))
@Form.create()
export default class AddCustomer extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      idtype: 1,
      birthday: '',
      age: '',
      sex: '',
      id: '',
      idCardValue: 1,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    // // dispatch({
    // //   type: 'customer/getCustomerDetails',
    // //   payload: {
    // //     id: this.props.id,
    // //   },
    // });
  }

  onChangeSelect = value => {
    this.setState({
      idtype: value,
    });
  };
  render() {
    const { getFieldDecorator, form, dispatch } = this.props;
    const {
      customer: { customerList, customerPage, customerDetailsObj, customerLoading },
    } = this.props;
    const marriageShow = this.props.marriageShow;
    const isEdit = this.props.isEdit;
    const recordCustomer = this.props.recordCustomer ? this.props.recordCustomer : '';
    // console.log("recordCustomer1231313", recordCustomer);
    return (
      <Form>
        <FormItem {...customerFormItemLayout} label="客户姓名">
          {form.getFieldDecorator('custName', {
            initialValue: isEdit ? recordCustomer && recordCustomer.custName : null,
            rules: [
              {
                required: true,
                message: '请输入客户姓名',
              },
            ],
          })(<Input placeholder="请输入客户姓名" />)}
        </FormItem>
        <FormItem {...customerFormItemLayout} label="证件号码">
          <InputGroup compact>
            {form.getFieldDecorator('idtype', {
              initialValue: isEdit
                ? recordCustomer && recordCustomer.idtype
                : this.state.idCardValue,
              rules: [
                {
                  required: true,
                  message: '请选择', //this.state.idcardFlag ? '身份证号码已存在' :
                },
              ],
            })(
              <Select style={{ width: '30%' }} placeholder="请选择" onChange={this.onChangeSelect}>
                <Option value={1}>身份证</Option>
                <Option value={2}>其他</Option>
              </Select>
            )}
            {form.getFieldDecorator('idcard', {
              initialValue: isEdit ? recordCustomer && recordCustomer.idcard : null,
              rules: [
                {
                  required: true,
                  message: '请输入证件号码', //this.state.idcardFlag ? '身份证号码已存在' :
                },
              ],
            })(<Input style={{ width: '70%' }} placeholder="请输入" />)}
          </InputGroup>
        </FormItem>
        {this.state.idtype == 2 ? (
          <Row>
            <FormItem {...customerFormItemLayout} label="性别">
              {form.getFieldDecorator('sex', {
                initialValue: isEdit ? recordCustomer && recordCustomer.sex : null,
                rules: [
                  {
                    required: true,
                    message: '请选择性别',
                  },
                ],
              })(
                <RadioGroup>
                  <Radio value={1}>男</Radio>
                  <Radio value={2}>女</Radio>
                </RadioGroup>
              )}
            </FormItem>
            {/* <FormItem {...customerFormItemLayout} label="年龄">
              {form.getFieldDecorator('age', {
                rules: [
                  {
                    required: true,
                    message: '请输入年龄',
                  },
                ],
              })(<Input placeholder="请输入年龄" />)}
            </FormItem> */}
            <FormItem {...customerFormItemLayout} label="出生日期">
              {form.getFieldDecorator('birthday', {
                initialValue: isEdit ? recordCustomer && recordCustomer.birthday : null,
                rules: [
                  {
                    required: true,
                    message: '请输入出生日期',
                  },
                ],
              })(
                <DatePicker
                  style={{ width: '100%' }}
                  placeholder="请选择出生日期"
                  format="YYYY-MM-DD"
                />
              )}
            </FormItem>
          </Row>
        ) : null}
        <FormItem {...customerFormItemLayout} label="联系电话">
          {form.getFieldDecorator('phone', {
            initialValue: isEdit ? recordCustomer && recordCustomer.phone : null,
            rules: [
              {
                required: true,
                message: '请输入联系电话',
              },
            ],
          })(<Input placeholder="请输入联系电话" />)}
        </FormItem>
        {marriageShow ? (
          <FormItem {...customerFormItemLayout} label="客户关系">
            {form.getFieldDecorator('relation', {
              // initialValue: isEdit ? customerDetailsObj && customerDetailsObj.relation : null,
              rules: [
                {
                  required: true,
                  message: '请选择客户关系',
                },
              ],
            })(
              <Select placeholder="请选择">
                <Option value={1}>父亲/母亲</Option>
                <Option value={2}>配偶</Option>
                <Option value={3}>子/女</Option>
                <Option value={4}>兄弟/姐妹</Option>
                <Option value={5}>其他</Option>
              </Select>
            )}
          </FormItem>
        ) : null}
      </Form>
      // </Modal>
    );
  }
}
